<template>
  <div class="profile">
    <!-- 头部图片 -->
    <div style="width: 100%; height: 8rem">
      <img
        src="../../../assets/images/mehead.jpg"
        alt=""
        style="width: 100%; height: 8rem"
      />
    </div>

    <!-- 头部栏 -->
    <div
      style="
        width: 100%;
        height: auto;
        position: relative;
        z-index: 2;
        background: white;
      "
    >
      <div
        style="
          width: 90%;
          height: auto;
          margin: auto;
          background: white;
          position: relative;
          top: -2rem;
          border-radius: 10px;
        "
      >
        <p
          style="
            width: 100%;
            text-align: center;
            background: white;
            border-radius: 10px;
          "
        >
          <img
            :src="profillist.icon"
            alt=""
            style="
              width: 4rem;
              height: 4rem;
              position: relative;
              top: -1.7rem;
              border-radius: 50%;
            "
          />
          <span
            style="
              width: 100%;
              text-align: center;
              display: inline-block;
              font-size: 0.9rem;
              font-weight: 550;
              letter-spacing: 2px;
            "
            >{{ profillist.name }}</span
          >
        </p>
      </div>
      <div>
        <!-- <van-tabs v-model="active">
        
          <van-tab title=""> -->
        <div>
          <ul class="abul">
            <li>
              <span class="lii"> 成立时间 </span>
              <span class="litwo">{{
                String(profillist.createTime).substring(0, 10)
              }}</span>
            </li>
            <li>
              <span class="lii"> 公司规模 </span>
              <span class="litwo"> {{ profillist.scale }} </span>
            </li>
            <li>
              <span class="lii"> 专长风格 </span>
              <span class="litwo">简约、重视、欧式 </span>
            </li>
            <li>
              <span class="lii"> 承接价位</span>
              <span class="litwo">
                5-8万、30-40万、5-8万、30-40万、5-8万、30-40万、5-8万、30-40万、5-8万、30-40万、5-8万、30-40万、
              </span>
            </li>
            <li>
              <span class="lii"> 服务区域 </span>
              <span class="litwo"> 宿城、宿豫、沭阳、泗阳、泗洪 </span>
            </li>
            <li>
              <span class="lii"> 营业时间 </span>
              <span class="litwo"> {{ profillist.businessTime }}</span>
            </li>
            <li>
              <span class="lii"> 公司介绍 </span>
              <span class="litwo">
                {{ profillist.introduce }}
                　</span
              >
            </li>
          </ul>
        </div>
        <!-- </van-tab> -->
        <!-- 资质荣誉tab -->
        <!-- <van-tab title="资质荣誉">
            <ul class="abul">
              <li style="display: flex; flex-direction: column">
                <p>营业执照</p>
                <p>
                  <img
                    @click="open(profillist.businessLicense)"
                    :src="profillist.businessLicense"
                    alt=""
                    style="
                      width: 6rem;
                      height: 6rem;
                      margin-top: 0.5rem;
                      object-fit: cover;
                    "
                  />
                </p>
              </li>
              <li
                style="width: 100%; height: 0.8rem; background: #5d5c6175"
              ></li>
              <li style="display: flex; flex-direction: column">
                <p style="">资质荣誉</p>
                <p style="display: flex; overflow-x: scroll">
                  <img
                    @click="open(vlu)"
                    v-for="(vlu, index) in profillist.honorCertificate"
                    :src="vlu"
                    alt=""
                    :style="index != 0 ? 'margin-left:15px' : 'margin-left:0px'"
                    style="
                      width: 6rem;
                      height: 6rem;
                      margin-top: 0.5rem;
                      object-fit: cover;
                    "
                    :key="index"
                  />
                </p>
              </li>
            </ul>
          </van-tab> -->
        <!-- </van-tabs> -->
      </div>
    </div>
    <decorationlist />

    <div
      v-show="luay"
      style="
        display: flex;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        position: fixed;
        z-index: 11111;
        align-items: center;
      "
      @click="colse"
    >
      <img src="" alt="" style="width: 100%; height: auto" ref="opim" />
    </div>
  </div>
</template>
<script>
import { Tab, Tabs, Toast } from 'vant';
import { getdecList, getent } from '@/api/api';
import decorationlist from '@/components/decorationlist';

export default {
  name: 'profile',
  data() {
    return {
      luay: false,
      active: 0,
      profillist: '',
    };
  },
  created() {
    this.gedeconlist();
  },
  methods: {
    // 预览开启
    open(item) {
      let opim = this.$refs.opim;
      opim.src = item;
      this.luay = true;
    },
    // 预览关闭
    colse() {
      this.luay = false;
    },
    // 商铺接口
    gedeconlist() {
      getdecList([Number(this.$route.params.id)]).then((res) => {
        this.profillist = res.data.data.list[0];
        console.log(this.profillist, 999);
      });
    },
  },
  components: {
    decorationlist,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
  },
};
</script>
<style lang="scss">
/deep/.van-tab--active {
  color: red !important;
  font-weight: 700 !important;
}
* {
  margin: 0;
  padding: 0;
}

.abul {
  width: 100%;
  padding-bottom: 1rem;
  // border-top: 1px solid #5d5c6175;
  li:nth-child(1) {
    //padding-top: 1rem;
  }
  li:nth-child(3) {
    padding-top: 1rem;
  }
  li:nth-child(5) {
    padding-top: 1rem;
  }
  li:nth-child(7) {
    padding-top: 1rem;
  }
  li {
    display: flex;
    width: 90%;
    margin: 0.4rem auto;
    .lii {
      display: inline-block;
      width: 30%;
      text-align: center;
      // padding-bottom: 0.2rem;
      // letter-spacing: 2.5px;
      font-size: 14px;
      color: rgb(150, 151, 153);
      // margin-left: 0.85rem;
    }
    .litwo {
      display: inline-block;
      width: 70%;
      // letter-spacing: 2px;
      font-size: 14px;
      // margin-left: 0.85rem;
    }
  }
}
</style>